<div class="btn-group btn-group-justified">
  <span href="#" class="btn btn-info " routerLink="/bookdetails/reply">写评论</span>
  <span href="#" class="btn btn-info active">时间</span>
  <span href="#" class="btn btn-info">热度</span>
</div>

<div class="well">

  <div class="list-group">
            <span class="list-group-item ">
              <div class="row">
                <div class="col-xs-4">
                  <a href="#">
                    <img class="media-object circle" src="../../../assets/Tuscany,%20Ital.jpg" style="width: 60px;height: 50px;">
                  </a>
                 </div>
               <div class="col-xs-8" style="padding-top: 12px;height: 50px">
                 <span>独自55</span>
                 <span style="float: right;margin-right: 10px">2019-11-28</span>
               </div>
              </div>
            </span>
    <span class="list-group-item"><p>Dapibus ac facilisis in</p></span>
    <span class="list-group-item">
     <div class="btn-group btn-group-justified">

        <a href="#" class="btn btn-info ">赞(0)</a>
        <a href="#" class="btn btn-info">踩(0)</a>
       <a href="#" class="btn btn-info" data-toggle="modal" data-target="#reply">写评论</a>
        <a class="btn btn-info"  data-toggle="modal" data-target="#bookComment">评论数(0)</a>
      </div>
       </span>
  </div>
  <div class="list-group">
            <span class="list-group-item ">
              <div class="row">
                <div class="col-xs-4">
                  <a href="#">
                    <img class="media-object circle" src="../../../assets/Tuscany,%20Ital.jpg" style="width: 60px;height: 50px;">
                  </a>
                 </div>
               <div class="col-xs-8" style="padding-top: 12px;height: 50px">
                 <span>独自55</span>
                 <span style="float: right;margin-right: 10px">2019-11-28</span>
               </div>
              </div>
            </span>
    <span class="list-group-item"><p>Dapibus ac facilisis in</p></span>
    <span class="list-group-item">
     <div class="btn-group btn-group-justified">

        <a href="#" class="btn btn-info ">赞(0)</a>
        <a href="#" class="btn btn-info">踩(0)</a>
       <a href="#" class="btn btn-info" routerLink="/bookdetails/reply">写评论</a>
        <a class="btn btn-info"  data-toggle="modal" data-target="#bookComment">评论数(0)</a>
      </div>
       </span>
  </div>
  <div class="list-group">
            <span class="list-group-item ">
              <div class="row">
                <div class="col-xs-4">
                  <a href="#">
                    <img class="media-object circle" src="../../../assets/Tuscany,%20Ital.jpg" style="width: 60px;height: 50px;">
                  </a>
                 </div>
               <div class="col-xs-8" style="padding-top: 12px;height: 50px">
                 <span>独自55</span>
                 <span style="float: right;margin-right: 10px">2019-11-28</span>
               </div>
              </div>
            </span>
    <span class="list-group-item"><p>Dapibus ac facilisis in</p></span>
    <span class="list-group-item">
     <div class="btn-group btn-group-justified">

        <a href="#" class="btn btn-info ">赞(0)</a>
        <a href="#" class="btn btn-info">踩(0)</a>
       <a href="#" class="btn btn-info" routerLink="/bookdetails/reply">写评论</a>
        <a class="btn btn-info" data-toggle="modal" data-target="#bookComment">评论数(0)</a>
      </div>
       </span>
  </div>
  <ul class="pagination pagination-lg" style="margin-left: 9%;">
    <li class="disabled"><a href="#">&laquo;</a></li>
    <li class="m-active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">...</a></li>

    <li><a href="#">9</a></li>

    <li><a href="#">&raquo;</a></li>
  </ul>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="bookComment" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
     style="margin-top: 15%;margin-bottom: 15%">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          &times;
        </button>
        <h4 class="modal-title" id="myModalLabel">
          Ta的回复
        </h4>
      </div>
      <div class="modal-body">
        <div class="well">


          <div class="list-group">
            <span class="list-group-item ">
              <div class="row">
                <div class="col-xs-4">
                  <a href="#">
                    <img class="media-object circle" src="../../../assets/Tuscany,%20Ital.jpg" style="width: 60px;height: 50px;">
                  </a>
                 </div>
               <div class="col-xs-8" style="padding-top: 12px;height: 50px">
                 <span>独自55</span>
                 <span style="float: right;margin-right: 10px">2019-11-28</span>
               </div>
              </div>
            </span>
            <span class="list-group-item"><p>Dapibus ac facilisis in</p></span>
            <span class="list-group-item">
     <div class="btn-group btn-group-justified">

        <a href="#" class="btn btn-info ">赞(0)</a>
        <a href="#" class="btn btn-info">踩(0)</a>
       <a href="#" class="btn btn-info" data-dismiss="modal" routerLink="/bookdetails/reply">写评论</a>

      </div>
       </span>
          </div>


          <div class="list-group">
            <span class="list-group-item ">
              <div class="row">
                <div class="col-xs-4">
                  <a href="#">
                    <img class="media-object circle" src="../../../assets/Tuscany,%20Ital.jpg" style="width: 60px;height: 50px;">
                  </a>
                 </div>
               <div class="col-xs-8" style="padding-top: 12px;height: 50px">
                 <span>独自55</span>
                 <span style="float: right;margin-right: 10px">2019-11-28</span>
               </div>
              </div>
            </span>
            <span class="list-group-item"><p>Dapibus ac facilisis in</p></span>
            <span class="list-group-item">
     <div class="btn-group btn-group-justified">

        <a href="#" class="btn btn-info ">赞(0)</a>
        <a href="#" class="btn btn-info">踩(0)</a>
       <a href="#" class="btn btn-info" data-dismiss="modal" routerLink="/bookdetails/reply">写评论</a>

      </div>
       </span>
          </div>

          <div class="list-group">
            <span class="list-group-item ">
              <div class="row">
                <div class="col-xs-4">
                  <a href="#">
                    <img class="media-object circle" src="../../../assets/Tuscany,%20Ital.jpg" style="width: 60px;height: 50px;">
                  </a>
                 </div>
               <div class="col-xs-8" style="padding-top: 12px;height: 50px">
                 <span>独自55</span>
                 <span style="float: right;margin-right: 10px">2019-11-28</span>
               </div>
              </div>
            </span>
            <span class="list-group-item"><p>Dapibus ac facilisis in</p></span>
            <span class="list-group-item">
     <div class="btn-group btn-group-justified">

        <a href="#" class="btn btn-info ">赞(0)</a>
        <a href="#" class="btn btn-info">踩(0)</a>
       <a href="#" class="btn btn-info" data-dismiss="modal" routerLink="/bookdetails/reply">写评论</a>

      </div>
       </span>
          </div>
          <ul class="pagination pagination-lg" style="margin-left: 4%;">
            <li class="disabled"><a href="#">&laquo;</a></li>
            <li class="m-active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">...</a></li>

            <li><a href="#">9</a></li>

            <li><a href="#">&raquo;</a></li>
          </ul>
        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
        </button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal -->
</div>
<!-- 模态框（Modal） -->

<div class="modal fade" style="margin-top: 60%;z-index: 9999;position: absolute;left:0;background-color: #6864698f;height: 100%;width: 100%;" id="reply" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"  data-backdrop="static" keyboard="false">
  <div class="modal-dialog">
    <div class="modal-content" style="background-color: #06a696;text-align: center;">

      <span class="btn  btn-lg btn-block">
        <h4>写评论</h4>
      </span>

    </div><!-- /.modal-content -->
    <br>
    <div class="well" >
      加载中......
    </div>
    <br>

     <div class="btn-group btn-group-justified">

        <span href="#" class="btn btn-info ">取消</span>
        <span href="#" class="btn btn-info">提交</span>

      </div>

    <br>
    <div class="btn btn-info btn-lg btn-block" >
      加载中......
    </div>

  </div><!-- /.modal -->
</div>

